import React, { Component } from 'react'

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
//主题
import echartsTheme from '../../../utils/dark'
// 引入柱状图
import 'echarts/lib/chart/line'
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'

class EchartsTest extends Component {
  componentDidMount() {
    echarts.registerTheme('theme', echartsTheme)
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main8'), echartsTheme)
    //选项
    var option = {
      title: {
        text: '某地区蒸发量和降水量',
        subtext: '纯属虚构',
        textAlign: 'center', //居中方式 可以是left center right
        subtext: '副标题',
        x: 'center',
        subtextStyle: {
          color: 'red',
        },
      },
      tooltip: {
        trigger: 'axis',
        //trigger: 'item'
      },
      legend: {
        data: ['最高', '最低'],
      },
      toolbox: {
        show: true,
        orient: 'horizontal', //布局方式默认为水平布局,可选'vertical'
        x: 'right', //也可以是具体的数值或者是center,right
        y: 'top', //也可以是center,left也可以是数值
        color: ['#le90ff', '#22bb22', '#4b0082', '#d2691e'],
        backgroundColor: '#ccc',
        borderWidth: 0,
        padding: 5,
        showTitle: true,
        feature: {
          mark: {
            show: true,
            title: {
              mark: '辅助线-开关',
              markUndo: '辅助线-删除',
              markClear: '辅助线-清空',
            },
            lineStyle: {
              width: 1,
              color: '#1e90ff',
              type: 'dashed',
            },
          },

          restore: { show: true },
          saveAsImage: { show: true },
          dataZoom: {
            show: true,
            title: {
              dataZoom: '区域缩放 ',
              dataZoomReset: '区域缩放-后退',
            },
          },
          //数据表格
          dataView: {
            show: true,
            title: '数据视图',
            readOnly: true,
            lang: ['数据视图', '关闭', '刷新'],
            optionToContent: function (opt) {
              console.log(opt)
              var axisData = opt.xAxis[0].data
              var series = opt.series
              var table =
                '<table style="width:100%;text-align:center"></tbody><tr>' +
                '<td>时间</td>' +
                '<td>' +
                series[0].name +
                '</td>' +
                '<td>' +
                series[1].name +
                '</td>' +
                '</tr>'
              for (var i = 0; i < axisData.length; i++) {
                table +=
                  '<tr>' +
                  '<td>' +
                  axisData[i] +
                  '</td>' +
                  '<td>' +
                  series[0].data[i] +
                  '</td>' +
                  '<td>' +
                  series[1].data[i] +
                  '</td>' +
                  '</tr>'
              }
              table += '</tbody></table>'

              return table
            },
          },
          //数据图形选择
          magicType: {
            show: true,
            title: {
              line: '动态类型切换-折线图',
              bar: '动态类型切换-柱形图',
              stack: '动态类型切换-堆积',
              tiled: '动态类型切换-平铺',
            },
            type: ['line', 'bar', 'stack', 'tiled'],
          },
          //还原
          restore: {
            show: true,
            title: '还原',
            color: 'black',
          },
          saveAsImage: {
            show: true,
            title: '保存为图片',
            type: 'jpeg',
            lang: ['点击本地保存'],
          },
        },
      },

      calculable: true,
      //数据缩放
      dataZoom: {
        show: true,
        realtime: true, //是否实时显示
        start: 10, //选择起始比例
        end: 80, //选择终结比例
      },
      xAxis: [
        {
          type: 'category', //value time
          boundaryGap: false, //类目起始和结束两端空白策略，默认true留空,false则顶头
          data: (function () {
            var list = []
            for (var i = 1; i <= 30; i++) {
              list.push('2013-03-' + i)
            }
            return list
          })(), //立即执行匿名函数
        },
      ],
      yAxis: [
        {
          type: 'value',
          // boundaryGap: [0.1, 0.1], //坐标轴两端空白策略，数组内数值代表百分比
          splitNumber: 4, // 数值轴，分割段数 ，默认为5
        },
      ],
      series: [
        {
          name: '最高',
          type: 'line',
          data: (function () {
            var list = []
            for (var i = 1; i <= 30; i++) {
              list.push(Math.round(Math.random() * 30))
            }
            return list
          })(),
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' },
            ],
          },
          markLine: {
            data: [{ type: 'average', name: '平均值' }],
          },
        },
        {
          name: '最低',
          type: 'line',
          data: (function () {
            var list = []
            for (var i = 1; i <= 30; i++) {
              list.push(Math.round(Math.random() * 10))
            }
            return list
          })(),
          markPoint: {
            data: [
              {
                name: '随机点',
                value: 9,
                xAxis: 10,
                yAxis: 13,
                symbolSize: 18,
              },
              { name: '年最低', value: 22.3, xAxis: 11, yAxis: 23 },
            ],
          },
          markLine: {
            data: [{ type: 'average', name: '平均值' }],
          },
        },
      ],
    }

    // 绘制图表
    myChart.setOption(option)
  }
  render() {
    return (
      <div
        id="main8"
        style={{ width: 400, height: 400, float: 'left', marginRight: '60px' }}
      ></div>
    )
  }
}

export default EchartsTest
